<template>
	<view class="main">
		<view class="list_box" v-for="v in dataList.list" :key="v.hosId">
			<view class="list_content" @click="goDetails(v.hosId)">
				<view class="pic">
					<!-- <u--image :showLoading="true" :src="log_pic" shape="circle" width="45px" height="45px"></u--image> -->
					<u-avatar :src="v.logo" size="45" shape="circle" :default-url="log_pic"></u-avatar>
				</view>
				<view class="list">
					<view class="title" v-if="v.platHosName">{{v.platHosName}}</view>
					<view class="hosp_type" v-if="v.hosTypeDesc"><span class="type" v-if="v.hosLevelDesc">{{v.hosLevelDesc}}</span>{{v.hosTypeDesc}}</view>
					<view class="address">
						<view class="localtion"><u--image :showLoading="true" :src="location" width="16rpx"
								height="20rpx"></u--image></view>
						<view class="adress_title" v-if="v.address">
							{{depDot(v.address,29)}}
						</view>
						<view class="far" v-if="v.distance">{{v.distance}}km</view>
					</view>
					<view class="brand">
						<view class="brand_list" v-for="value in v.label">
							{{value}}
						</view>
					</view>
				</view>
			</view>
			<!-- 右上角标签绝对定位，如果不需要可以删除不显示,下面是三种状态 -->
				<!-- 这个接口没返回，先注释掉 -->
		<!-- <view class="top_right">
				距离最近
			</view> -->
			
			<!-- <view class="top_right last">
				近期使用
			</view> -->
			<!--<view class="top_right subscribe">
				已关注
			</view> -->
		</view>
		<u-loadmore :status="pageStatus" v-if="!isList" style="padding-bottom: 180rpx;" />
		<!-- <u-loadmore :status="pageStatus"/> -->
		<view class="empty" v-if="showEmp">
			<u-empty mode="data" iconSize="140" textSize="18" :icon="emptyList" :text="emptyData" v-if="isList"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from "vuex";
	import {
		postKeyWord
	} from '@/api/home/search.js'

	export default {
		 name: "hosp-list",
		data() {
			return {
				isList:false,
				log_pic: require('@/static/icons/defalut_hosp.png'),
				emptyList: require('@/static/icons/empty_list.png'), //空列表
				docSrc:'',
				location: require('@/static/icons/location.png'),
				brand: ['挂号', '在线支付', '住院服务', '复旦排名全国第2名','复旦排名全国第2名','复旦排名全国第2名'],
				emptyData:'暂无医院信息',
			    showEmp:false
			};
		},
		methods:{
			goDetails(id){
				this.$store.state.doc.currentHosp.hospitalId = id
				uni.navigateTo({
					url: '/pages/sousuo/search_hosp_details/index'
				});
			},
			...mapMutations(['ALLRESET']),
		},
		computed:{
			dataList(){
				//console.log(this.$store.state.doc.hosList?.total);
				//this.showEmp = true
				if(this.$store.state.doc.hosList?.total > 0 && this.$store.state.doc.hosList?.total !== undefined){
					this.isList = false
				}else{
					this.isList = true
					//this.showEmp = true
				}
				//console.log(this.isList)
				return this.$store.state.doc.hosList
			},
			pageStatus(){
				return this.$store.state.doc.pageStatus
			},
			isCount(){
				//console.log(this.$store.state.doc.totalCount < 5);
				if(this.$store.state.doc.totalCount < 5){
					return false
				}else{
					return true
				}
			},
			depDot(){
				return (value,number) => {
					if(value && value.length > number){
						let res = ''
						res = value.slice(0,number) + '...'
						return res
					}
					return value
				}
			}
		},
		watch:{
			'$store.state.doc.frozen':{
				handler(ne,ol){
					this.showEmp = ne
				},
				immediate:true
			}
		},
		onShow() {
			//console.log(this.$store.state.doc.totalCount,'totalCount');
			//this.indexData()
			 //console.log(this.$store.state.doc.geoList,123567);
		},
		mounted() {
			this.ALLRESET()
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #F5F6F8;
		//padding-top: 30rpx;
		padding-bottom: 100rpx;
		.list_box {
			padding-top: 24rpx;
			background-color: #fff;
			margin: 0 30rpx 30rpx 30rpx;
			border-radius: 20rpx;
			position: relative;

			.list_content {
				display: flex;
				justify-content: space-between;
				.pic {
					margin: 0 10rpx 0 30rpx;
				}

				.list {
					display: flex;
					flex-direction: column;
					width: 100%;
					.title {
						font-size: 30rpx;
						font-weight: 400;
						color: #000000;
						line-height: 50rpx;
					}

					.hosp_type {
						height: 32rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						line-height: 32rpx;
						margin: 8rpx 0 14rpx 0;

						.type {
							margin-right: 10rpx;
							padding: 6rpx 8rpx;
							text-align: center;
							background: #FBF1EF;
							border-radius: 4rpx;
							border: 2rpx solid #E16740;
							font-size: 22rpx;
							font-weight: 400;
							color: #E16740;
							line-height: 24rpx;
						}
					}

					.address {
						display: flex;
						flex-direction: row;
						align-items: center;

						.localtion {
							margin-right: 10rpx;
						}

						.adress_title {
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
							line-height: 32rpx;
							flex: 2;
						}

						.far {
							font-size: 24rpx;
							font-weight: 400;
							color: #333333;
							line-height: 24rpx;
							//margin-left: 182rpx;
							margin:0 20rpx;
						}
					}

					.brand {
						display: flex;
						flex-wrap: wrap;
						margin-bottom: 30rpx;
						.brand_list {
							flex-shrink: 0;
							margin-top: 16rpx;
							margin-right: 18rpx;
							padding: 6rpx 8rpx 6rpx 8rpx;
							font-size: 22rpx;
							color: #0F91F7;
							font-weight: 400;
							line-height: 24rpx;
							text-align: center;
							background: #EFF7FF;
							border-radius: 4rpx;
						}
					}
				}
			}

			.top_right {
				position: absolute;
				top: 0;
				right: -4rpx;
				width: 50px;
				height: 20px;
				background: #D9FEFF;
				border-radius: 0px 10rpx 0px 20rpx;
				text-align: center;
				font-size: 20rpx;
				font-weight: 400;
				color: #027E80;
				line-height: 40rpx;
			}

			.subscribe {
				color: #F9823A;
				background: #FFECE1;
			}

			.last {
				color: #3F80FF;
				background: #EAEFFF;
			}
		}
		.empty{
			padding-top: 100rpx;
			padding-bottom: 200rpx;
		}
		// .list_box::after{
		// 	content: '';
		// 	top: 0;
		// 	left: 0;
		// 	transform: translate(5%,-70%);
		// 	width: 50px;
		// 	height: 20px;
		// 	background: #D9FEFF;
		// 	border-radius: 0px 10px 0px 10px;
		// }
	}
</style>